<template>
  <div>
     <!-- 顶部搜索区域 -->
    <el-card>
      <el-form v-model="searchDate" ref="searchRef" label-width="100px" class="demo-ruleForm">
        <el-row class="demo-ruleForm-row">
          <el-col :span="6">
            <el-form-item label="项目名称" prop="name">
              <el-input placeholder="请输入招标项目名称" v-model="searchDate.name" clearable></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="6">
            <el-form-item label="分包编号" prop="subcontract">
              <el-input placeholder="请输入分包编号" v-model="searchDate.subcontract" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="参投单位" prop="company_name">
              <el-input placeholder="请输入参投单位" v-model="searchDate.company_name" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" >
            <div class="search_col">
              <el-button type="primary" size="mini" icon="el-icon-search">搜索</el-button>
              <el-button type="primary" size="mini" icon="el-icon-refresh" @click="resetForm">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 卡片视图区域 -->
    <el-card>
      <div class="left">
        <el-button type="primary" size="mini" icon="el-icon-upload">生成通知书</el-button>
      </div>

      <el-table :data="tableData" :row-class-name="tableRowClassName" 
      style="width: 100%" border
      :header-cell-style="{
          'background-color': '#CBD9EC',
          color: '#fff',
          'font-weight': '400',
      }"
      @selection-change="handleSelectionChange"
      @sort-change="onSortChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="序号" width="75" type="index"></el-table-column>
        <el-table-column prop="name" label="招标项目名称" width="240"></el-table-column>
        <el-table-column prop="subcontract" label="分包编号" width="240"> </el-table-column>
        <el-table-column prop="" label="包名称（部位）" width="150"></el-table-column>
        <el-table-column prop="subcontracted" label="分标项目名称" width="260"> </el-table-column>
        <el-table-column prop="company_name" label="参投单位" width="120"> </el-table-column>
        <el-table-column prop="offer" label="最终报价(万元)" width="150" sortable="custom" :sort-orders="['ascending','descending']"> </el-table-column>
        <el-table-column prop="approve" label="最终折扣" width="100"> </el-table-column>
        <el-table-column prop="prize" label="是否中标" width="80"> </el-table-column>
        <el-table-column prop="winning" label="中标金额(万元)" width="150" sortable="custom" :sort-orders="['ascending','descending']"> </el-table-column>
        <el-table-column prop="server" label="应收中标服务费(元)" width="120"> </el-table-column>
        <el-table-column prop="ensure" label="实收保证金(元)"> </el-table-column>
        <el-table-column prop="price" label="应收保证金（标书规定缴纳金额）(元)" width="160"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="detailsClick(scope.$index, scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table> 

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.mount"
        :page-sizes="[1, 3, 6, 10]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

     <!-- 详情弹框 -->
    <el-dialog title="数据详情" :visible.sync="detailsDialogVisible" width="90%">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="one">
        <el-tab-pane label="开票信息" name="first">
          <el-table :data="invoiceData" stripe style="width: 100%" border>
            <el-table-column prop="company_name" label="参投单位" width="180"> </el-table-column>
            <el-table-column prop="contacts" label="厂商联系人"> </el-table-column>
            <el-table-column prop="phone" label="手机"> </el-table-column>
            <el-table-column prop="award" label="中标通知书代理机构留存情况"> </el-table-column>
            <el-table-column prop="letter" label="中标通知书厂家领取情况"> </el-table-column>
            <el-table-column prop="employer" label="中标通知书业主单位"> </el-table-column>
            <el-table-column prop="acceptance" label="中标通知书需求部门"> </el-table-column>
            <el-table-column prop="address" label="厂家邮寄地址"> </el-table-column>
            <el-table-column prop="remarks" label="备注"> </el-table-column>
            <el-table-column label="操作" width="220">
              <template>
                <el-button type="primary" size="mini">增加</el-button>
                <el-button type="warning" size="mini">修改</el-button>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="公司管理" name="second">
          <el-table :data="companyData" border style="width: 100%">
            <el-table-column prop="dates" label="保证金/中标服务费缴纳时间" width="180"> </el-table-column>
            <el-table-column prop="amount" label="应退还保证金额(元)"> </el-table-column>
            <el-table-column prop="fee" label="实收标书费(元)"> </el-table-column>
            <el-table-column prop="Invoicing" label="开票/申请开票情况"> </el-table-column>
            <el-table-column prop="requested" label="申请开票金额"> </el-table-column>
            <el-table-column prop="Invoices" label="申请开票金额"> </el-table-column>
            <el-table-column prop="amountes" label="已开票金额(元)"> </el-table-column>
            <el-table-column prop="uninvoiced" label="未开票金额(元)"> </el-table-column>
            <el-table-column prop="information" label="开票信息"> </el-table-column>
            <el-table-column prop="examine" label="审核"> </el-table-column>
            <el-table-column label="操作" width="220">
              <template>
                <el-button type="primary" size="mini">增加</el-button>
                <el-button type="warning" size="mini">修改</el-button>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 搜索数据
      searchDate: {
        name: '',
        subcontract: '',
        company_name: ''
      },
      // 表格数据
      tableData: [
        {
          name: '国网江西省电力有限公司上饶供电分公司集体企业2020年第002批物资类招标',
          subcontract: 'JXRY2020-SR-002-JT(WZ)-101',
          package_name: '',
          subcontracted: '铁塔',
          company_name: '江西固德实业有限公司',
          offer: 346.368,
          approve:9.5,
          prize: '是',
          winning: '/',
          server: '/',
          ensure: 4000,
          price: 4000,
          children: [
            {
              id: 0,
              dates: '2021-8-6',
              amount: 40000.0,
              fee: '/',
              Invoicing: '/',
              requested: '/',
              Invoices: '/',
              amountes: '/',
              uninvoiced: '/',
              information: '/',
              examine: '/',
            },
          ],
          list: [
            {
              company_name: '江西固德实业有限公司',
              contacts: '李俊云',
              phone: 13606066961,
              award: '',
              letter: '',
              employer: '',
              acceptance: '',
              address: '',
              remarks: '',
            },
          ],
        },
        {
          name: '国网江西省电力有限公司上饶供电分公司集体企业2020年第002批物资类招标',
          subcontract: 'JXRY2020-SR-002-JT(WZ)-101',
          package_name: '',
          subcontracted: '铁塔',
          company_name: '青岛祥明电力设备有限公司',
          offer: 366.628,
          approve:9.5,
          prize: '是',
          winning: 366.628,
          server: 34692.064,
          ensure: 4000,
          price: 4000,
          children: [
            {
              dates: '2021-8-6',
              amount: 6406.93699999999,
              fee: '/',
              Invoicing: '/',
              requested: '/',
              Invoices: '/',
              amountes: '/',
              uninvoiced: '/',
              information: '/',
              examine: '/',
            },
          ],
          list: [
            {
              company_name: '青岛祥明电力设备有限公司',
              contacts: '刘朋善',
              phone: 13360862688,
              award: '',
              letter: '',
              employer: '已邮寄或收到',
              acceptance: '已邮寄或收到',
              address: '',
              remarks: '',
            },
          ],
        },
        {
          name: '国网江西省电力有限公司上饶供电分公司集体企业2020年第002批物资类招标',
          subcontract: 'JXRY2020-SR-002-JT(WZ)-101',
          package_name: '',
          subcontracted: '铁塔',
          company_name: '中电建成都铁塔有限公司司',
          offer: 342.3863,
          winning: '/',
          approve:9.5,
          prize: '是',
          server: '/',
          ensure: 4000,
          price: 4000,
          children: [
            {
              dates: '2021-8-6',
              amount: 40000.0,
              fee: '/',
              Invoicing: '/',
              requested: '/',
              Invoices: '/',
              amountes: '/',
              uninvoiced: '/',
              information: '/',
              examine: '/',
            },
          ],
          list: [
            {
              company_name: '中电建成都铁塔有限公司',
              contacts: '代光杰',
              phone: 13808093424,
              award: '',
              letter: '',
              employer: '',
              acceptance: '',
              address: '',
              remarks: '',
            },
          ],
        },
      ],

      // 分页数据
      page: {
        // 每页显示几条数据
        size: 6,
        // 当前页码值
        mount: 0,
      },
      // 总数据条数
      total: 6,

      // 存储选中的数据
      checkboxList: [],

      // 详情弹框数据区域
      // 控制详情数据的显示与隐藏
      detailsDialogVisible: false,
      companyData: {},
      // 公司管理数据
      invoiceData: {},
      // tab栏默认选中项
      activeName: 'first',
    }
  },
  methods: {
    // 表格排序事件处理函数
    // @param {object} {column,prop,order} 列数据|排序字段|排序方式
    onSortChange({ prop, order }) {
        this.tableData.sort(this.compare(prop,order));
    },
    // 排序比较
    // @param {string} propertyName 排序的属性名
    // @param {string} sort ascending(升序)/descending(降序)
    // @return {function}
    compare (propertyName, sort) {
        return function (obj1, obj2) {
            var value1 = obj1[propertyName]
            var value2 = obj2[propertyName]
            if (typeof value1 === 'string' && typeof value2 === 'string') {
                const res = value1.localeCompare(value2, 'zh')
                return sort === 'ascending' ? res : -res
            } else {
                if (value1 <= value2) {
                    return sort === 'ascending' ? -1 : 1
                } else if (value1 > value2) {
                    return sort === 'ascending' ? 1 : -1
                }
            }
        }
    },

    // 隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },

    // 重置事件
    resetForm() {
      this.searchDate.name = '';
      this.searchDate.subcontract = '';
      this.searchDate.company_name = '';
    },

    // 每页数据显示条数改变时触发
    handleSizeChange(newSize) {
      console.log(newSize)
    },
    // 页码值发生改变时触发
    handleCurrentChange(newPage) {
      console.log(newPage)
    },

    // 全选
    handleSelectionChange(val) {
      this.checkboxList = val;
      console.log(this.checkboxList);
    },

    // 详情事件区域
    // 点击详情事件触发
    detailsClick(index, row) {
      // console.log(row)
      this.companyData = row.children
      this.companyData.index = index
      // console.log(this.companyData)

      this.invoiceData = row.list
      this.invoiceData.index = index
      // console.log(this.invoiceData)
      this.detailsDialogVisible = true
    },

    // tab栏选中项改变时触发
    handleClick(tab, event) {
      // console.log(tab, event)
    },
  }
}
</script>

<style>

</style>